<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.2rem;
      }
    </style>
  </head>

  <body>
    <div id="app" class="table-content">
      <div class="table-form">
        <el-form ref="dataForm" :model="admissionForm" label-width="138px" class="dataForm">
          <el-row>
            <el-row style="width: 100%">
              <el-col :span="24">
                <el-row>
                  <el-col :span="4" style="border-right: 1px solid #000000">
                    <div style="display: flex; align-items: center; justify-content: center">
                      <img src="./assets/image/img5.png" alt="" style="width: 100px" />
                    </div>
                  </el-col>
                  <el-col :span="20">
                    <el-row>
                      <el-col :span="24">
                        <div class="formItemDutyIn boder_right_0 boder_left_0" style="border-bottom: 1px solid #000; font-weight: 600">劳务人员入场承诺书</div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">姓名</el-col>
                          <el-col :span="16" class="formItemDutyIn"><el-input v-model="admissionForm.name" /></el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <el-row>
                          <el-col :span="8">联系方式</el-col>
                          <el-col :span="16" class="formItemDutyIn" style="border-right: 0"><el-input v-model="admissionForm.phone" /></el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-row class="border-top">
                          <el-col :span="8">性别</el-col>
                          <el-col :span="16" class="formItemDutyIn"><el-input v-model="userInfo2.sexName" /></el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="12">
                        <el-row class="border-top">
                          <el-col :span="8">身份证号</el-col>
                          <el-col :span="16" class="formItemDutyIn" style="border-right: 0"><el-input v-model="admissionForm.idCard" /></el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="4" class="border-right border-top"> 分包单位 </el-col>
                  <el-col :span="10" class="border-top border-right"><el-input v-model="admissionForm.laborName" /></el-col>
                  <el-col :span="10" class="border-top">
                    <div class="flex">
                      <div style="flex: 1" class="border-right">班组名称</div>
                      <div style="flex: 2"><el-input v-model="admissionForm.workTypeName" /></div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="4" class="border-right border-top"> 告知人 </el-col>
                  <el-col :span="20" class="border-top"> 中铁九局集团有限公司盐宜铁路站前施工10标段项目经理部 </el-col>
                </el-row>

                <el-row class="p-2 border-top text-left">
                  <div class="text-indent">本人郑重承诺并保证做到以下几点：</div>
                  <div class="text-indent">一、严格遵守法律法规、公司管理规定，并服从和接受各级管理。</div>
                  <div class="text-indent">二、知悉公司的各项规章制度、项目告示牌和权益维护牌上公示的各项内容，自愿配合公司落实“农民工实名制”各项工作。</div>
                  <div class="text-indent">三、不隐瞒且如实提供个人的身份信息，如实报告个人作业技能，持证真实性，健康状况，主动报告不能适应工作。</div>
                  <div class="text-indent">四、公司用于发放工资的银行卡由本人使用和保管，本人定期与班组长核实确定工资款，不虚报出勤，不冒领工资，否则本人自愿承担相应法律责任。</div>
                  <div class="text-indent">五、当自己合法权益受到侵害时（如劳资纠纷、工伤事故纠纷等），向公司（项目部）申诉或向总包单位请求协调解决，在处理无效的情况下，依法向有关部门举报投诉。自觉遵守法律法规，决不采取闹访、围攻围堵公共设施等非法过激行为，决不恶意或过激讨薪，通过合法途径理性反映诉求。如有无理或非法行为愿意承担一切法律责任。</div>
                  <div class="text-indent">六、承诺在入场前后所提供的任何资料和信息均真实有效，否则，由此引起的一切后果均由我本人承担。</div>
                </el-row>

                <el-row class="border-top">
                  <el-col :span="8" class="border-right flex-center">本人已认真阅读并熟知上述农民工管理要点</el-col>
                  <el-col :span="16">
                    <div class="flex" style="text-align: left; margin-bottom: 20px">
                      <span @click="setUpEquipment('admissionForm.promiseSign','TaskSignFinger')">承诺人（签字并加按手印）：</span>
                      <el-image v-show="admissionForm.promiseSign" class="sign_img" :src="admissionForm.promiseSign" fit="fill"></el-image>
                    </div>
                    <div class="flex" style="justify-content: flex-end">
                      <el-input v-model="admissionForm.year" class="people-input" placeholder=" " style="width: 0.8rem"></el-input>
                      年
                      <el-input v-model="admissionForm.month" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
                      月
                      <el-input v-model="admissionForm.day" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
                      日
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const vue3Composition = {
        setup() {
          const admissionForm = ref({
            year: "",
            month: "",
            day: "",
            name: "",
            idCard: "",
            phone: "",
            laborName: "", // 公司
            workTypeName: "", // 班组
            promiseSign: "", //承诺人
          });
          const userInfo2 = ref({
            sexName: "",
          });

          window.setSign = (event) => {
            admissionForm.value[event.key] = event.img;
          };

          window.getData = (event) => {
            return admissionForm.value;
          };
          window.setData = (data) => {
            admissionForm.value.year = data.year;
            admissionForm.value.month = data.month;
            admissionForm.value.day = data.day;
            admissionForm.value.name = data.name;
            admissionForm.value.idCard = data.idCard;
            admissionForm.value.phone = data.phone;
            admissionForm.value.laborName = data.laborName;
            admissionForm.value.workTypeName = data.teamName;
            userInfo2.value.sexName = data.sexName;
          };

          //peopleForm.sign
          const setUpEquipment = (key, type) => {
            window.parent.childListener({
              key,
              type,
            });
          };
          return {
            admissionForm,
            setUpEquipment,
            userInfo2,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>
